<template>
  <div>
    <el-row :gutter="14">
      <el-col :span="4">
        <div class="label-wrap category">
          <label for="">分类：</label>
          <div class="warp-content">
            <el-select v-model="categoryValue" clearable placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in options.category"
                :key="item.id"
                :label="item.category_name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="label-wrap date">
          <label for="">日期：</label>
          <div class="warp-content">
            <el-date-picker
              style="width: 100%;"
              v-model="dateValue"
              type="datetimerange"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00', '08:00:00']">
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="label-wrap key-work">
          <label for="">关键字：&nbsp;&nbsp;</label>
          <div class="warp-content">
            <el-select v-model="search_key" style="width: 100%;">
              <el-option
                v-for="item in search_option"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <el-input v-model="search_keyWork" placeholder="请输入内容" style="width: 100%;"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" style="width: 100%;" @click="getList">搜索</el-button>
      </el-col>
      <el-col :span="2">&nbsp;</el-col>
      <el-col :span="2" class="pull-right">
        <el-button type="danger" style="width: 100%;" @click="dialogInfo = true">新增</el-button>
      </el-col>
    </el-row>
    <!--表格数据-->
    <div class="black-space-30"></div>
    <el-table :data="tableData.item" v-loading="loadingData" @selection-change="handleSelectionChange" border style="width: 100%">
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="title" label="标题" width="400"></el-table-column>
      <el-table-column prop="categoryId" label="类型" :formatter="toCategory" width="120"></el-table-column>
      <el-table-column prop="createDate" label="日期" :formatter="toDate" width="170"></el-table-column>
      <el-table-column prop="user" label="管理员" width="70"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="editInfo(scope.row.id)">编辑</el-button>
          <router-link :to="{ name: 'InfoDetailed' }" class="margin-left-10 margin-right-10">
            <el-button type="success" size="mini">编辑详情</el-button>
          </router-link>
          <el-button type="danger" size="mini" @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--底部分页-->
    <div class="black-space-30"></div>
    <el-row>
      <el-col :span="12">
        <el-button size="medium" @click="deleteAll">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination
          class="pull-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total=tableData.total
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!--新增弹窗-->
    <DialogInfo :flag.sync="dialogInfo" :category="options.category"/>
    <!--新增弹窗-->
    <DialogInfoEdit :flag.sync="dialogInfoEdit" :id="infoId" :category="options.category" @getList="getList"/>
  </div>
</template>

<script>
import DialogInfo from './dialog/info'
import DialogInfoEdit from './dialog/edit'
import { global } from '@/utils/global'
import { GetInfoList, DeleteInfo } from '@/api/news'
import { formatDate } from '@/utils/common'
import { reactive, ref, onMounted } from '@vue/composition-api'
export default {
  name: 'infoIndex',
  components: { DialogInfo, DialogInfoEdit },
  setup (props, { root }) {
    const { str: aaa, confirm } = global()
    // 信息弹窗标记
    const dialogInfo = ref(false)
    const dialogInfoEdit = ref(false)
    const search_key = ref('id')
    const search_keyWork = ref('')
    const loadingData = ref(false)
    const deleteInfoId = ref('')
    const infoId = ref('')
    // 搜索关键字
    const search_option = reactive([
      { value: "id", label: "ID"},
      { value: "title", label: "标题"},
    ])
    const options = reactive({
      category: []
    })
    const tableData = reactive({
      item: [],
      total: 0,
      pageNumber: 1,
      pageSize: 10
    })
    const categoryValue = ref('')
    const dateValue = ref('')

    const handleSizeChange = (val) => {
      tableData.pageSize = val
      getList()
    }
    const handleCurrentChange = (val) => {
      tableData.pageNumber = val
      getList()
    }
    const deleteItem = (value) => {
      deleteInfoId.value = [value]
      confirm({
        content: "确认删除当前信息，确认后将无法恢复！！",
        tip: "警告",
        fn: confirmDelete
      })
    }
    const deleteAll = () => {
      if (!deleteInfoId.value || deleteInfoId.value.length === 0) {
        root.$message({
          message: '请选择要删除的数据！！！',
          type: "error"
        })
        return
      }
      confirm({
        content: "确认删除选择的数据，确认后将无法恢复！",
        tip: "警告",
        fn: confirmDelete
      })
    }
    const confirmDelete = () => {
      DeleteInfo({id: deleteInfoId.value}).then(response => {
        deleteInfoId.value = ''
        getList()
      })
    }
    const handleSelectionChange = (val) => {
      let id = val.map(item => item.id)
      deleteInfoId.value = id
    }

    const getInfoCategory = () => {
      root.$store.dispatch('common/getInfoCategory').then(response => {
        options.category = response
      })
    }

    const formatData = () => {
      let requestData = {
        pageNumber: tableData.pageNumber,
        pageSize: tableData.pageSize
      }
      // 分类ID
      if (categoryValue.value) {
        requestData.categoryId = categoryValue.value
      }
      // 日期
      if (dateValue.value.length > 0) {
        requestData.startTiem = dateValue.value[0]
        requestData.endTime = dateValue.value[1]
      }
      requestData[search_key.value] = search_keyWork.value
      return requestData
    }
    const getList = () => {
      let requestData = formatData()
      loadingData.value = true
      GetInfoList(requestData).then(response => {
        let data = response.data.data
        tableData.item = data.data
        tableData.total = data.total
        loadingData.value = false
        // 清空输入信息
        categoryValue.value = ''
        dateValue.value = []
        search_keyWork.value = ''
      }).catch(error => {
        loadingData.value = false
      })
    }
    const toDate = (row, column, cellValue, index) => {
      return formatDate(row.createDate, 'yyyy-MM-dd hh:mm:ss')
    }
    const toCategory = (row) => {
      let categoryId = row.categoryId
      let data = options.category.filter(item => item.id === categoryId)[0]
      return data.category_name
    }

    const editInfo = (params) => {
      dialogInfoEdit.value = true
      infoId.value = params
    }
    /**
     * 生命周期
     */
    onMounted(() => {
      getInfoCategory()
      getList()
    })

    return {
      dialogInfo,loadingData,dialogInfoEdit,
      search_key,deleteInfoId,
      search_keyWork,
      search_option,
      options,infoId,
      tableData,
      categoryValue,
      dateValue,
      handleSizeChange,editInfo,
      handleCurrentChange,formatData,
      deleteItem,handleSelectionChange,
      deleteAll,toCategory,
      getInfoCategory,
      getList,toDate
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
.label-wrap {
  &.category { @include labelDom(left, 50, 40); }
  &.date { @include labelDom(right, 53, 40); }
  &.key-work { @include labelDom(right, 69, 40); }
}
</style>
